<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iOS6Switch demo</title>
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="ios6switch.css" />
</head>

<body>
<h1>iOS6Switch 演示</h1>
<div style="height:19px;"></div>

<h3>基本演示</h3>
<div class="section">
<p>1.首先在页面上准备一个复选框</p>
<pre>
&lt;input type=&quot;checkbox&quot; class=&quot;mycheckbox&quot; /&gt;
</pre>
&nbsp;效果：<input type="checkbox" />
</div>

<div class="section">
<p>2.在复选框上运行脚本</p>
<pre>
$(&quot;.mycheckbox&quot;).ios6switch();
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="mycheckbox" />
</div>

<div class="section">
<p>3.可以一次指定多个复选框</p>
<p>插件启动时会自动检测每个复选框的勾选状态</p>
<pre>
$(&quot;.mycheckboxes&quot;).ios6switch();
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="mycheckboxes" />
<input type="checkbox" class="mycheckboxes" checked="checked" />
<input type="checkbox" class="mycheckboxes" />
</div>

<h3>禁用与启用</h3>
<div class="section">
<p>1.禁用相应的复选框元素</p>
<p>插件启动时会自动检测每个复选框的disable状态</p>
<pre>
&lt;input type=&quot;checkbox&quot; class=&quot;disabledemo&quot; disabled=&quot;disabled&quot; /&gt;
&lt;script&gt;$(&quot;.disabledemo&quot;).ios6switch();&lt;/script&gt;
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="disabledemo" disabled="disabled" />
</div>

<div class="section">
<p>2.设置已禁用开关的透明度</p>
<pre>
$(&quot;.disabledopacitydemo&quot;).ios6switch({
	disabledOpacity: 0.75
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="disabledopacitydemo" disabled="disabled" />
</div>

<div class="section">
<p>3.动态修改开关的禁用/启用状态</p>
<pre>
$(&quot;.dynamicdisabledemo&quot;).ios6switch();

$(&quot;.enablebutton&quot;).click(function(){
	$(&quot;.dynamicdisabledemo&quot;).trigger(&quot;enable&quot;);
});

$(&quot;.disablebutton&quot;).click(function(){
	$(&quot;.dynamicdisabledemo&quot;).trigger(&quot;disable&quot;);
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="dynamicdisabledemo" />
<button class="enablebutton">启用</button>
<button class="disablebutton">禁用</button>
</div>

<h3>颜色设置</h3>
<div class="section">
<p>1.设置开关打开部分的颜色</p>
<pre>
$(&quot;.orangeswitch&quot;).ios6switch({switchonColor: &quot;#FF7A00&quot;});
$(&quot;.greenswitch&quot;).ios6switch({switchonColor: &quot;#0DE900&quot;});
$(&quot;.fuchsiaswitch&quot;).ios6switch({switchonColor: &quot;#FF00FF&quot;});
$(&quot;.tealswitch&quot;).ios6switch({switchonColor: &quot;#008080&quot;});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="orangeswitch" checked="checked" />
<input type="checkbox" class="greenswitch" checked="checked" />
<input type="checkbox" class="fuchsiaswitch" checked="checked" />
<input type="checkbox" class="tealswitch" checked="checked" />
</div>

<div class="section">
<p>2.同时设置开关打开和关闭部分的颜色</p>
<pre>
$(&quot;.cyanfuchsiaswitch&quot;).ios6switch({
	switchoffColor: &quot;#00FFFF&quot;,
	switchonColor: &quot;#FF00FF&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="cyanfuchsiaswitch" />
</div>

<div class="section">
<p>3.设置标签文字的颜色</p>
<pre>
$(&quot;.textcolorswitch&quot;).ios6switch({
	switchoffTextColor: &quot;#FF0000&quot;,
	switchonTextColor: &quot;#7CFC00&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="textcolorswitch" />
</div>

<div class="section">
<p>4.设置手柄及其按下时的颜色</p>
<pre>
$(&quot;.thumbcolorswitch&quot;).ios6switch({
	thumbColor: &quot;#FFFF00&quot;,
	thumbPressedColor: &quot;#DBDB00&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="thumbcolorswitch" />
</div>

<div class="section">
<p>5.同时设置手柄打开和关闭状态的颜色</p>
<pre>
$(&quot;.thumbonoffcolorswitch&quot;).ios6switch({
	thumbColor: &quot;#FF7A00&quot;,<br />	thumbPressedColor: &quot;#B35500&quot;,<br />	thumbSwitchonColor: &quot;#FF00FF&quot;,<br />	thumbSwitchonPressedColor: &quot;#B300B3&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="thumbonoffcolorswitch" />
</div>

<h3>尺寸设置</h3>
<div class="section">
<p>单位：像素</p>
<pre>
$(&quot;.largeswitch&quot;).ios6switch({size: 40});
$(&quot;.smallswitch&quot;).ios6switch({size: 16});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="largeswitch" />&nbsp;
<input type="checkbox" class="smallswitch" />
<br /><a class="togglea" onclick="scrollToElement('#sizedemo')">说明：插件支持动态改变尺寸，查看详情请点击此行文字。</a>
</div>

<h3>标签文字</h3>
<div class="section">
<pre>
$(&quot;.yesnolabelswitch&quot;).ios6switch({
	switchoffText: &quot;off&quot;,
	switchonText: &quot;on&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="yesnolabelswitch" />
<div class="note">说明：可以在这里使用HTML。</div>
</div>

<h3>声音效果</h3>
<div class="section">
<pre>
$(&quot;.sounddemo&quot;).ios6switch({
	sound: &quot;sounds/unlock.mp3&quot;
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="sounddemo" />
<div class="note">说明：不支持IE8及更低版本的浏览器。</div>
</div>

<h3>禁用拖动效果</h3>
<div class="section">
<p>当鼠标按下手柄并拖动超过5像素时，开关进入拖动状态，松开鼠标后，插件将根据手柄所在的位置来判断开关是开启还是关闭。</p>
<p>拖动效果支持移动设备</p>
<pre>
$(&quot;.nodragdemo&quot;).ios6switch({
	draggable: false
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="nodragdemo" />
</div>

<h3>动画速度设置</h3>
<div class="section">
<p>1.无动画</p>
<pre>
$(&quot;.noanimatedemo&quot;).ios6switch({
	animateSpeed: 0
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="noanimatedemo" />
</div>

<div class="section">
<p>2.1000毫秒</p>
<p>单位：毫秒</p>
<pre>
$(&quot;.animatespeeddemo&quot;).ios6switch({
	animateSpeed: 1000
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="animatespeeddemo" />
</div>

<div class="section">
<p>3.匀速运动</p>
<pre>
$(&quot;.linearanimatedemo&quot;).ios6switch({
	animateEasing: "linear"
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="linearanimatedemo" />
<div class="note">说明：如果要使用更多的动画过渡效果，可以参考 jQuery Easing 插件。</div>
</div>

<h3>显示原复选框</h3>
<div class="section">
<pre>
$(&quot;.showboxdemo&quot;).ios6switch({
	showOriginalCheckbox: true
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="showboxdemo" />
</div>

<h3>用脚本来控制开关</h3>
<div class="section">
<p>1.打开和关闭</p>
<p>直接在原复选框元素上运行脚本即可</p>
<pre>
$(&quot;.scriptcontroldemo&quot;).ios6switch();

$(&quot;.switchonbutton&quot;).click(function(){
	$(&quot;.scriptcontroldemo&quot;).trigger(&quot;switchon&quot;);
});

$(&quot;.switchoffbutton&quot;).click(function(){
	$(&quot;.scriptcontroldemo&quot;).trigger(&quot;switchoff&quot;);
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="scriptcontroldemo" />
<button class="switchonbutton">打开</button>
<button class="switchoffbutton">关闭</button>
</div>

<div class="section">
<p>2.打开或关闭</p>
<pre>
$(&quot;.scripttoggledemo&quot;).ios6switch();

$(&quot;.toggleswitchbutton&quot;).click(function(){
	$(&quot;.scripttoggledemo&quot;).trigger(&quot;toggleswitch&quot;);
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="scripttoggledemo" />
<button class="toggleswitchbutton">切换</button>
<div class="note">说明：以上所提及的三种方法对已禁用的开关无效。</div>
</div>

<h3>取值</h3>
<div class="section">
<p>1.被动取值</p>
<p>直接对原复选框元素进行取值即可</p>
<pre>
$(&quot;.clickcheckdemo&quot;).ios6switch();

$(&quot;.checkbutton&quot;).click(function(){
	alert($(&quot;.clickcheckdemo&quot;)[0].checked);
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="clickcheckdemo" />
<button class="checkbutton">检查状态</button>
<div class="note">说明：在jQuery选择器后面加“[0]”是为了把jQuery元素转为DOM元素进行处理。</div>
</div>

<div class="section">
<p>2.主动触发</p>
<p>直接在原复选框元素上绑定onchange事件即可</p>
<pre>
$(&quot;.changecheckdemo&quot;).ios6switch();

$(&quot;.changecheckdemo&quot;)[0].onchange = function(){
	$(&quot;.checkfield&quot;).addClass(&quot;checkchanged&quot;);
	setTimeout(function(){$(&quot;.checkfield&quot;).removeClass(&quot;checkchanged&quot;)}, 100);

	$(&quot;.checkfield&quot;)[0].innerHTML = $(&quot;.changecheckdemo&quot;)[0].checked;
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="changecheckdemo" />
<span class="checkfield">&larr;点击</span>
</div>

<h3>删除</h3>
<div class="section">
<p>删除iOS6Switch，恢复原来的复选框</p>
<pre>
$(&quot;.deletedemo&quot;).ios6switch();

$(&quot;.deletebutton&quot;).click(function(){
	$(&quot;.deletedemo&quot;).trigger(&quot;destroy&quot;);
});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="deletedemo" />
<button class="deletebutton">删除</button>
</div>

<h3>通过附加Class功能来进行更高级的操作</h3>
<div class="section">
<p>1.自定义样式示例 - iOS 7 样式</p>
<pre>
$(&quot;.ios7styledemo&quot;).ios6switch({
	switchonColor: &quot;#64BD63&quot;,
	addClass:&quot;ios7style&quot;
});
</pre>
<a class="togglea" onclick="$('.stoggle1').slideToggle();">点击此处展开/隐藏CSS部分</a><br />
<pre class="dtoggle stoggle1">
.ios6switch.ios7style{
	border:1px solid #999999;
}
.ios6switch.ios7style .ios6switch_shadow_and_highlight{
	background:none;
}
.ios6switch.ios7style .ios6switch_thumb{
	background-image:none;
	border:1px solid #999999;
	box-shadow:none;
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="ios7styledemo" />
<div class="note">说明：某些样式会通过脚本直接添加到元素上，如果要通过CSS定义这些样式，可以使用 !important 设置样式优先级。</div>
</div>

<div class="section">
<p>2.自定义样式示例 - 全透明样式</p>
<pre>
$(&quot;.bgtransparentdemo&quot;).ios6switch({addClass:&quot;transparentbg&quot;});
</pre>
<a class="togglea" onclick="$('.stoggle2').slideToggle();">点击此处展开/隐藏CSS部分</a><br />
<pre class="dtoggle stoggle2">
.ios6switch.transparentbg{
	border:1px solid #4C566C;
}
.ios6switch.transparentbg .ios6switch_shadow_and_highlight{
	background:none;
}
.ios6switch.transparentbg .ios6switch_thumb{
	background:none !important;
	border:1px solid #4C566C;
	box-shadow:none;
}
.ios6switch.transparentbg .ios6switch_switch_off, .ios6switch.transparentbg .ios6switch_switch_on{
	color:#4C566C !important;
	background:none !important;
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="bgtransparentdemo" />
</div>

<div class="section" id="sizedemo">
<p>3.动态改变尺寸</p>
<p>只需要改变开关的高度即可，开关的宽度固定为高度的79/27</p>
<pre>
$(&quot;.changesizedemo&quot;).ios6switch({addClass:&quot;changeSize&quot;});

$(&quot;.size20button&quot;).click(function(){$(&quot;.changeSize&quot;).animate({height:&quot;20px&quot;})});
$(&quot;.size27button&quot;).click(function(){$(&quot;.changeSize&quot;).animate({height:&quot;27px&quot;})});
$(&quot;.size40button&quot;).click(function(){$(&quot;.changeSize&quot;).animate({height:&quot;40px&quot;})});
$(&quot;.size50button&quot;).click(function(){$(&quot;.changeSize&quot;).animate({height:&quot;50px&quot;})});
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="changesizedemo" />
<button class="size20button">设置尺寸为20</button>
<button class="size27button">设置尺寸为27</button>
<button class="size40button">设置尺寸为40</button>
<button class="size50button">设置尺寸为50</button>
</div>

<div class="section">
<p>4.自定义样式示例 - 使用CSS定义背景1</p>
<pre>
$(&quot;.bgcolorstyledemo&quot;).ios6switch({addClass:&quot;huegradient&quot;});
</pre>
<a class="togglea" onclick="$('.stoggle3').slideToggle();">点击此处展开/隐藏CSS部分</a><br />
<pre class="dtoggle stoggle3">
.ios6switch.huegradient .ios6switch_switch_off{
	background-image: url(&quot;&quot;);
}
.ios6switch.huegradient .ios6switch_switch_on{
	background-image:-webkit-linear-gradient(to bottom, #F00, #FF0, #0F0, #0FF, #00F, #F0F);
	background-image:linear-gradient(to bottom, #F00, #FF0, #0F0, #0FF, #00F, #F0F);
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="bgcolorstyledemo" checked="checked" />
</div>

<div class="section">
<p>5.自定义样式示例 - 使用CSS定义背景2</p>
<pre>
$(&quot;.bgpatterndemo&quot;).ios6switch({addClass:&quot;patterngradient&quot;});
</pre>
<a class="togglea" onclick="$('.stoggle4').slideToggle();">点击此处展开/隐藏CSS部分</a><br />
<pre class="dtoggle stoggle4">
.ios6switch.patterngradient .ios6switch_switch_off{
	background-color:#CC1166 !important;
}
.ios6switch.patterngradient .ios6switch_switch_on{
	background-color:#026873 !important;
}
.ios6switch.patterngradient .ios6switch_switch_off, .ios6switch.patterngradient .ios6switch_switch_on{
	color:#FFFFFF !important;
	background-size:20px 20px;
	background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	background-image:linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="bgpatterndemo" />
</div>

<h3>其它</h3>
<div class="section">
<p>反向</p>
<p>只需要互换打开与关闭部分的样式并且反转true与false的含义即可</p>
<pre>
$(&quot;.invertdemo&quot;).ios6switch({
	switchonColor: &quot;#FFFFFF&quot;,
	switchoffColor: &quot;#008AF2&quot;,
	switchonTextColor: &quot;#555555&quot;,
	switchoffTextColor: &quot;#FFFFFF&quot;,
	switchonText: &quot;0&quot;,
	switchoffText: &quot;1&quot;
});

$(&quot;.invertdemo&quot;)[0].onchange = function(){
	$(&quot;.invertcheckfield&quot;).addClass(&quot;checkchanged&quot;);
	setTimeout(function(){$(&quot;.invertcheckfield&quot;).removeClass(&quot;checkchanged&quot;)}, 100);

	$(&quot;.invertcheckfield&quot;)[0].innerHTML = !$(&quot;.invertdemo&quot;)[0].checked;
}
</pre>
<div class="label">&nbsp;效果：</div>
<input type="checkbox" class="invertdemo" checked="checked" />
<span class="invertcheckfield">&larr;点击</span>
</div>

<h3>多浏览器支持</h3>
<div class="section">
<p>默认兼容性：IE9+ Chrome Firefox Safari Opera…</p>
<p>本插件在JS上对IE7/8进行了支持，但是部分核心CSS效果不支持IE7/8（如background-size、border-radius等）</p>
<p>如果要在IE7/8上实现最佳视觉效果，可以参考以下插件：</p>
<pre>
CSS3 PIE: <a class="togglea" href="http://css3pie.com/" target="_blank">http://css3pie.com/</a>
background-size polyfill: <a class="togglea" href="http://github.com/louisremi/background-size-polyfill" target="_blank">http://github.com/louisremi/background-size-polyfill</a>
</pre>
<div class="label"></div>
<input class="mycheckboxes" type="checkbox" />
</div>

<h3>选项说明</h3>
<div class="section">
<div style="padding:5px;">
<table width="100%" border="0" cellspacing="0">
  <tr style="background:#ADB2BB;background:rgba(173,178,187,.7);">
    <td width="225" style="border-top-left-radius:5px;"><strong>选项名称</strong></td>
    <td width="140"><strong>默认值</strong></td>
    <td style="border-top-right-radius:5px;"><strong>描述</strong></td>
  </tr>
  <tr>
    <td>showOriginalCheckbox</td>
    <td>false</td>
    <td>是否显示原复选框。</td>
  </tr>
  <tr>
    <td>size</td>
    <td>27</td>
    <td>开关的尺寸。（单位：像素）</td>
  </tr>
  <tr>
    <td>draggable</td>
    <td>true</td>
    <td>是否允许手柄拖动效果。当鼠标按下手柄并拖动超过5像素时，开关进入拖动状态，松开鼠标后，插件将根据手柄所在的位置来判断开关是开启还是关闭，拖动效果支持移动设备。</td>
  </tr>
  <tr>
    <td>disabledOpacity</td>
    <td>0.5</td>
    <td>已禁用开关的透明度。</td>
  </tr>
  <tr>
    <td>addClass</td>
    <td>&quot;&quot;</td>
    <td>附加到开关元素上的Class，可用于自定义样式等，多个Class请用空格分隔。</td>
  </tr>
  <tr>
    <td>sound</td>
    <td>&quot;&quot;</td>
    <td>用户操作开关时播放的声音。（指定音频文件的路径，不支持IE8及更低版本的浏览器）</td>
  </tr>
  <tr>
    <td>animateSpeed</td>
    <td>400</td>
    <td>滑动动画持续时间。（单位：毫秒）</td>
  </tr>
  <tr>
    <td>animateEasing</td>
    <td>&quot;swing&quot;</td>
    <td>滑动动画的时间曲线，包含swing（缓动）和linear（匀速）两个可用的值。如果要使用更多的动画过渡效果，可以参考 jQuery Easing 插件。</td>
  </tr>
  <tr>
    <td>thumbColor</td>
    <td>&quot;#FFFFFF&quot;</td>
    <td>手柄在关闭状态下的颜色。</td>
  </tr>
  <tr>
    <td>thumbPressedColor</td>
    <td>&quot;#CCCCCC&quot;</td>
    <td>手柄在关闭状态下被按下时的颜色。</td>
  </tr>
  <tr>
    <td>thumbSwitchonColor</td>
    <td>&quot;&quot;</td>
    <td>手柄在打开状态下的颜色。如果此值留空，则会使用与thumbColor相同的颜色。</td>
  </tr>
  <tr>
    <td>thumbSwitchonPressedColor</td>
    <td>&quot;&quot;</td>
    <td>手柄在打开状态下被按下时的颜色。如果此值留空，则会使用与thumbSwitchonColor相同的颜色。</td>
  </tr>
  <tr>
    <td>switchoffTextColor</td>
    <td>&quot;#555555&quot;</td>
    <td>关闭标签的文字颜色。</td>
  </tr>
  <tr>
    <td>switchonTextColor</td>
    <td>&quot;#FFFFFF&quot;</td>
    <td>打开标签的文字颜色。</td>
  </tr>
  <tr>
    <td>switchoffText</td>
    <td>&quot;0&quot;</td>
    <td>关闭标签的文字。</td>
  </tr>
  <tr>
    <td style="border-bottom-left-radius:5px;">switchonText</td>
    <td>&quot;1&quot;</td>
    <td style="border-bottom-right-radius:5px;">打开标签的文字。</td>
  </tr>
</table>
</div>
</div>

<h3>用法</h3>
<div class="section">
<ol>
<li>首先，在页面上引入jQuery，然后引入<span class="pre_s">ios6switch.js</span>和<span class="pre_s">ios6switch.css</span>。（或压缩版<span class="pre_s">ios6switch.min.js</span>）</li>
<div class="note">其中，ios6switch.js是插件主要部分的js，ios6switch.css中定义的是开关的默认样式，可以根据需要进行编辑。</div>
<div class="note">开关的HTML结构是通过js动态添加到页面上的，所以不需要在页面上额外准备内容。</div>
<a class="togglea note" onclick="$('.stoggle5').slideToggle();">点击这里展开/隐藏默认所需图片文件列表</a>
<div class="dtoggle stoggle5" style="margin-left:30px;">
	<div class="note">images/ios6switch_thumb.png  开关手柄的背景图像</div>
	<div class="note">images/ios6switch_shadow.png  开关内侧阴影和高亮效果的图像</div>
	<div class="note"><br />以上图片的位置如有变动，请到ios6switch.css中修改相应路径。</div>
</div>
<li>只需要在复选框上运行<span class="pre_s">$(元素).ios6switch(选项);</span>即可，选项说明和示例在上文已经列出。</li>
</ol>
</div>

<div class="★">更多插件：<a href="http://www.jq22.com/jquery-info3548" title="iOS 7 样式横幅通知插件" target="_blank" class="togglea">banneralert.js</a> <a href="http://www.jq22.com/jquery-info4077" title="iOS 6 样式对话框提示插件" target="_blank" class="togglea">iOS6Alert.js</a> …</div>
<a class="☆" onclick="$('html, body').animate({'scroll-top':0});">回顶部</a>
<script language="javascript" src="js/jquery-1.11.0.min.js"></script>
<script language="javascript" src="ios6switch.min.js"></script>

<script language="javascript" src="js/example.js"></script>
</body>
</html>
